<template>
  <div class="container-header large" slot="header">
    <Form class="search">
      <Row>
        <Col span="6">
          <FormItem label="所在区域" placeholder="选择区域">
            <AreaSelect @input="selectProvince" :isChangeOnSelect="true" v-model="list.form.addressArr"></AreaSelect>
          </FormItem>
          <FormItem label="年月选择">
            <DatePicker v-model="list.form.time" type="month" placeholder="年月选择"></DatePicker>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="经销商">
            <DistributorSelect ref="distributor-select" v-model="list.form.distributorId" :provinceId="list.form.provinceId" 
              :cityId="list.form.cityId" :areaId="list.form.areaId"
            ></DistributorSelect>
          </FormItem>
          <FormItem label="科室">
            <Select v-model="list.form.departmentObj" clearable filterable @on-change="setBranch">
              <Option v-for="(item, index) of reportDepart" :value="item" :key="index">{{item.name}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="门店">
            <StoreSelect v-model="list.form.storeId" :src="src" 
              :distributorId="list.form.distributorId" :provinceId="list.form.provinceId" 
              :cityId="list.form.cityId" :areaId="list.form.areaId"
            ></StoreSelect>
          </FormItem>
          <FormItem label="部门">
            <Select v-model="list.form.blockId" clearable filterable>
              <Option v-for="(item, index) of list.branch" :key="index" :value="item.id">{{item.name}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="4">
          <FormItem label="审核状态">
            <SelectList listType="fundCheckStatus" v-model="list.form.status" :clearable="true"/>
          </FormItem>
        </Col>
        <Col class-name="search" span="2">
          <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
  import AreaSelect from '@/components/AreaSelect'
  import SelectList from '@/components/SelectList'
  import DistributorSelect from '~/DistributorSelect'
  import StoreSelect from '~/StoreSelect'
  import { mapGetters } from 'vuex'
  export default {
    props: {
      list: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    components: {
      AreaSelect,
      SelectList,
      DistributorSelect,
      StoreSelect
    },
    data() {
      return {
        src: '/common/store/listStores'
      }
    },
    mounted () {
      this.$store.dispatch('getListDepartmentTree')
    },
    methods: {
      setBranch(row) {
        if(row) {
          this.list.form.departmentId = row.id
          this.list.branch = row.children
        } else {
          this.list.branch = []
          this.list.form.departmentId = null
          this.list.form.blockId = null
        }
      },
      selectProvince(item) {
        if (item.length) {
          this.list.form.provinceId = item[0]
          this.list.form.cityId = item.length > 1 ? item[1] : null
          this.list.form.areaId = item.length > 2 ? item[2] : null
        } else {
          this.list.form.provinceId = null
          this.list.form.cityId = null
          this.list.form.areaId = null
          this.list.form.distributorId = null // 所在区域删除之后，经销商也要清楚
          this.$refs['distributor-select'].remote()
        }
      },
      onSearchBtnClick() {
        let arr = this.list.form.addressArr
        if (arr.length) {
          this.list.form.provinceId = arr[0]
          this.list.form.cityId = arr.length > 1 ? arr[1] : null
          this.list.form.areaId = arr.length > 2 ? arr[2] : null
        } else {
          this.list.form.provinceId = null
          this.list.form.cityId = null
          this.list.form.areaId = null
        }
        let params = {
          ...this.list.form
        }
        this.$emit('onSearchBtnClick', params)
      }
    },
    computed: {
      ...mapGetters([
        'reportDepart'
      ])
    }
  }
</script>
